今天要來做的是按下更多文章的按鈕後，會從後端在撈出下一篇文章出來。

目標：
1.在Home/Index.cs 裡面加上jquery 的library
2.加上.net core section script

步驟：
step1. 加上section 和 jquery
section 就是讓view的js，可傳遞到Layout.cs上面

@section Scripts {
}

step2. 這個功能的核心 - Jquery 觸發後，到後端取得下兩篇的文章內容。
完整程式碼：

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
   
   <script>
        $("#getArticles").click(function(){
            var token = $('input[name="__RequestVerificationToken"]').val();
            $.ajax({
              type: 'Post',
              url: "/Article/GetMoreArticle",
              //dataType: "json",
              data: { 
                __RequestVerificationToken: token, 
               },
               success: function(data){
                   console.log(data)
                  for(let i =0;i< data.length;i++)
                  {
                        $('#articleIndex').append(`
                            <h3 class="display-4">
                                <a href=/Article/${data[i].id}>${data[i].title}</a>
                            </h3>
                        `);
                  }
                },
                error: function(data){
                       console.log(data)
                }
            });
        });
    </script>

}

note:
1.這邊必須再加上 @Html.AntiForgeryToken() 在Html 裡面，是為了防止 跨網域攻擊。
(就是防止一般人用postman 就可以發送邀請到你的網站)

2.Ajax部分就需要加上[ValidateAntiForgeryToken] ，不然會出現400的錯誤。